<template>
	<view style="height: 100vh; background-color: #f5f5f5">
		<topLogo></topLogo>
		<view style="height: 93.5%; padding: 20px 20px; box-sizing: border-box">
			<view style="height: 100%;padding: 0 20px;border-radius: 8px ; background-color: #fff;">

				<view
					style="display: flex;border-bottom: 1px solid #f5f5f5; background-color: #fff; align-items: center; justify-content: space-between; padding: 20px; border-radius: 8px 8px 0 0">
					<text style="font-weight: 600; font-size: 20px; color: #666666">拍照</text>
					<view @click="back"
						style="display: flex;align-items: center; border-radius: 3px;box-sizing: border-box; padding: 8px 20px; background-color: #0052d9">
						<text
							style="font-size: 18px;padding-top: 3px;box-sizing: border-box; color: #fff; margin-right: 9px">返回</text>
						<image src="/static/back.png" style=" width: 18px;height: 18px;" mode="">
						</image>
					</view>
				</view>

				<view
					style="display: flex;flex-direction: column; margin-bottom: 30px; height: 85%;display: flex;justify-content: center;align-items: center;">
					<view v-if="photoPreview" class="preview-container">
						<image :src="photoPreview" mode="aspectFit" class="preview-image" />
						<!-- <view style="position: absolute;bottom: 20px;right: 100px;">

							
						</view> -->
					</view>
					<view @click="takePhoto"
						style="background-color: #f5f5f5;width: 150px;height: 60px;border-radius: 8px;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 20px;">
						<text style="color: #666;">重新拍照</text>
					</view>
					<!-- <view @click="takePhoto"
						style="background-color: #0052d9;width: 150px;height: 60px;border-radius: 8px;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 20px;">
						<text style="">重新拍照</text>
					</view> -->
					<!-- <view v-else
					
						style="width: 80%;height: 80%;display: flex;flex-direction: column;align-items: center;">
						<view style="margin-bottom: 100px;">
							<text style="font-weight: 600;font-size: 30px;color: #333333;">
								为保证本人操作，请进行人脸认证
							</text>
						</view>
						<view style="margin-bottom: 180px;">
							<image src="/static/touxiang.png" style=" width: 600px;height: 600px;" mode=""></image>
						</view>
						<view style="display: flex;justify-content: space-around;width: 100%;">
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/zhedang@2x.png"
									style="width: 90px;height: 90px;margin-bottom: 16px;" mode=""></image>
								<text style="font-size: 30px;color: #666666;">避免遮挡</text>
							</view>
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/guangxian.png" style="width: 90px;height: 90px;margin-bottom: 16px;"
									mode=""></image>
								<text style="font-size: 30px;color: #666666;">光线充足</text>
							</view>
							<view
								style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
								<image src="/static/shouji.png" style="width: 90px;height: 90px;margin-bottom: 16px;"
									mode=""></image>
								<text style="font-size: 30px;color: #666666;">正对手机</text>
							</view>
						</view>
					</view> -->
				</view>

				<view class="">

					<button v-if="photoPreview" class="upload-btn" @click="uploadP" :loading="uploading">
						{{'确定上传本照片' }}
					</button>
					<!-- <button v-else class="upload-btn" @click="takePhoto">
						{{'拍照保存，进行人脸识别消课' }}
					</button> -->
				</view>

			</view>


		</view>
		<!-- <view class="title">请拍摄一张清晰的人脸照片</view>
		<view class="tips">
			建议：<text class="highlight">正对镜头、光线充足、人脸居中</text>
		</view>

	

		<button class="upload-btn" @click="takePhotoAndUpload" :loading="uploading">
			{{ uploading ? '上传中...' : '📷 拍照并上传' }}
		</button> -->
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import topLogo from '@/components/topLogo.vue';
	import {
		updateStudentFace
	} from '@/api/getData.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	// 接收页面传参（如 faceimg, tid, id）
	const faceimg = ref('')
	const tid = ref('')
	const id = ref('')

	// 本地状态
	const photoPreview = ref('') // 预览图
	const uploading = ref(false) // 上传状态



	const uploadP = async () => {
		if (uploading.value) return
		uploading.value = true
		console.log('上传的照片', photoPreview.value);
		try {
			const res = await uni.uploadFile({
				url: 'https://tsr.dingshengtaiqiu.com/billiards-data/jnjy/big/screen/updateStudentFace',
				filePath: photoPreview.value,
				name: 'file',
				formData: {
					studentId: studentId.value,
					campusId: campusId.value
				}
			})
			console.log(res);
			// if (err) throw new Error('网络错误')

			const data = JSON.parse(res.data)
			console.log('修改照片返回值', data);
			if (data.code == 200) {
				uni.showToast({
					title: '上传成功'
				})
				setTimeout(() => uni.navigateBack(), 1000)
			} else {
				throw new Error(data.msg || '上传失败')
			}
		} catch (err) {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		} finally {
			uploading.value = false
		}
	}


	// 拍照并上传
	const takePhoto = async () => {
		// if (uploading.value) return

		// uploading.value = true

		// try {
		// 调用原生相机拍照
		const res = await uni.chooseImage({
			count: 1, // 只拍一张
			sourceType: ['camera'], // 只从相机拍摄
			sizeType: ['compressed'], // 压缩图片，避免过大
		})

		const tempFilePath = res.tempFilePaths[0]
		photoPreview.value = tempFilePath // 显示预览（可选）
		// 上传文件
		// const uploadRes = await uni.uploadFile({
		// 	url: 'https://你的域名/school/wxxiaoke/FaceUploadTemp', // ✅ 替换为你的实际域名
		// 	filePath: tempFilePath,
		// 	name: 'image', // 后端接收字段名
		// 	formData: {
		// 		faceimg: faceimg.value,
		// 		tid: tid.value,
		// 		id: id.value,
		// 	},
		// })

		// // 处理响应
		// const data = JSON.parse(uploadRes.data)
		// if (data.IsSuccess === '1') {
		// 	uni.showToast({
		// 		title: '上传成功',
		// 		icon: 'success'
		// 	})
		// 	setTimeout(() => {
		// 		uni.redirectTo({
		// 			url: `/pages/index/index?wx=${id.value}`, // 假设 wx 是 id
		// 		})
		// 	}, 1000)
		// } else {
		// 	throw new Error(data.Msg || '上传失败')
		// }
		// } catch (err) {
		// 	const message = err.errMsg?.includes('cancel') ?
		// 		'用户取消操作' :
		// 		err.message || '拍照或上传失败'

		// 	uni.showToast({
		// 		title: message,
		// 		icon: 'none',
		// 		duration: 3000,
		// 	})
		// } finally {
		// 	uploading.value = false
		// }
	}
	const back = () => {
		uni.navigateBack()
	}
	const campusId = ref(null)
	const studentId = ref(null)
	onLoad((options) => {
		campusId.value = options.campusId;
		studentId.value = options.studentId;
	});
	onMounted(() => {
		takePhoto()
	})
</script>

<style scoped>
	.container {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 60rpx;
	}

	.highlight {
		color: #007aff;
		font-weight: 500;
	}

	.preview-container {
		/* background-color: #090; */
		/* width: 50%; */
		height: 70%;
		aspect-ratio: 4/5;
		margin-bottom: 80rpx;
		/* border: 2rpx dashed #ddd; */
		border-radius: 16rpx;
		overflow: hidden;
		/* display: flex; */
		/* position: relative; */
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.upload-btn {
		width: 100%;
		height: 66px;
		/* position: absolute; */
		bottom: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0052D9;
		font-weight: 600;
		box-sizing: border-box;
		border-radius: 3px;
		font-size: 24px;
		color: #FFFFFF;
	}

	.upload-btn:active {
		background-color: #0056b3;
	}
</style>